<template >
    <!-- 登录页面 -->
<BaseLyaout class="container">
    
<template #header></template>

<template #main>
    <el-row justify="center">
<!--1--><el-col :span="12" class="form_box">  
    <el-form class="el-form" :model="login_from" label-width="auto">

    <el-col :span="24" class="title">登录</el-col>
    <el-form-item label="账号" style="font-size: 60px;">
      <el-input v-model="login_from.name" autocomplete="off" placeholder="请输入账号" size="large"/>
    </el-form-item>

    <el-form-item label="密码" style="margin-top: 25px;">
      <el-input v-model="login_from.password" type="password" autocomplete="off" placeholder="请输入密码" size="large"/>
    </el-form-item>

    <el-row justify="center" style="margin-top: 25px;">
        <el-col :span="4.5">
            <el-button size="large" type="primary" @click="onLogin"  class="el-button">登录</el-button>
        </el-col>
        <el-col :span="5"></el-col>
        <el-col :span="4.5">
            <el-button size="large" type="warning"  @click="goto_enroll" class="el-button">前往注册</el-button>
        </el-col> 
    </el-row>

    <el-row justify="end" >
        <el-col :span="3" style="margin-top: 80px;">
            <router-link to="/change"><el-link type="danger">忘记密码</el-link></router-link>
        </el-col>
    </el-row>

  </el-form>
<!--1--></el-col>
  </el-row>
</template>

<template #footer></template>
</BaseLyaout>
</template>
<script setup>
import { reactive,ref,onMounted,onBeforeUnmount } from 'vue';
import {openInfo} from '../../utils/common'; //导入消息弹窗
import BaseLyaout from "@/components/BaseLyaout.vue"
import { useRouter } from 'vue-router';
import useUserStore from '../../stores/useUserStore';
import userHttp from '../../api/userHttp';
const userStore =useUserStore()
//创建路由实例
const router = useRouter()


// 处理首页图片适应屏幕尺寸
const pageHeight = ref(window.innerHeight);//获取页面高度

//用户登录表单
const login_from=reactive({
    name:"",
    password:""
})
//点击登录 --如果浏览器有token，则直接登录
function onLogin(){
    //验证表单完整性
    if(login_from.name==""||login_from.password==""){
        openInfo("Error","请输入完整表单信息!")
    }else{
        //发送登录请求
        userHttp.login(login_from).then((data)=>{
            openInfo("登录状态",data.msg)
            const userData = data.data //用户数据
            //如果状态码为200 则登录页面 把用户信息存到store
            if(data.code==200){
                userStore.userId=userData.userId
                userStore.userName=userData.name
                router.push({name:'musicList'})//跳到列表
            }
        })
    }  
}

//点击跳转注册页面
function goto_enroll() {
    router.push({name:'enroll'})  
}


</script>

<style scoped>
.container{
    height: 790px;
    width: 100%;
    background-image: url('@/assets/image/login_bg.png');
    background-repeat: no-repeat;/*不平铺*/
    background-size: cover; /*填满容器,多余的图片截掉 */
    background-attachment:fixed;
}
.form_box{
    width: 60%;
    height: 500px;
    border: 2px rgb(233, 171, 171) solid;
    border-radius: 20px;
}

.title{
    text-align: center;
    margin-bottom: 20px;
    font-size: 30px;
    font-family: '宋体';
    color:rgb(26, 214, 180);
}
.el-form{
    max-width: 80%;
    margin-top: 30px;
    margin-left: 50px;
}

.el-button{
    border-radius: 10px;
    background: transparent;
    color: rgb(44, 207, 191);
}


</style>